<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="searchForm.name" clearable placeholder="用户姓名"></el-input>
            </el-form-item>
            <el-form-item prop="idcardNumber">
                <el-input v-model="searchForm.idcardNumber" clearable placeholder="用户身份证号"></el-input>
            </el-form-item>
            <el-form-item prop="referrerFullname">
                <el-input v-model="searchForm.referrerFullname" clearable placeholder="推荐人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="referrerTelephone">
                <el-input v-model="searchForm.referrerTelephone" clearable placeholder="推荐人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="applyTime">
              <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="auditTime">
              <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.levelId" size="small" @change="handleSearch">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="searchForm.status" size="small" @change="handleSearch" style="margin-left:10px">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in statusList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-button  v-has="'audit:joinCompanyAudit:down'" type="warning" @click="handleDown()" size="small"  icon="el-icon-download" style="margin-left:10px" :loading="downLoading">导出</el-button>

          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" border :height="tableHeight" v-loading='loading'  stripe>
            <el-table-column prop="code" label="编号" v-if="!hideTableColumn.includes('number')" width="150"></el-table-column>
            <el-table-column prop="transferVoucherPic" label="凭证照" v-if="!hideTableColumn.includes('img')" width="100">
              <template #default="scope">
                 <el-image :src="scope.row.transferVoucherPic" fit="fill" v-image-preview class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="customerCode" label="加盟编码" v-if="!hideTableColumn.includes('joinCode')" width="110"></el-table-column>
            <el-table-column prop="telephone" label="手机号" v-if="!hideTableColumn.includes('phone')" align="center" width="130"></el-table-column>
            <el-table-column prop="name" label="真实姓名" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
            <el-table-column prop="idcardNumber" label="身份证号" v-if="!hideTableColumn.includes('idCard')" align="center" width="120"></el-table-column>
            <el-table-column prop="bankName" label="开户行" v-if="!hideTableColumn.includes('bank')" align="center" width="120"></el-table-column>
            <el-table-column prop="bankNumber" label="银行账号" v-if="!hideTableColumn.includes('bankNumber')" align="center"  width="110"></el-table-column>
            <el-table-column prop="levelData.name" label="加盟会员等级" v-if="!hideTableColumn.includes('level')" align="center" width="160">
              <template slot-scope="scope">
                <p style="margin: 0;">{{scope.row.levelData.name}}({{scope.row.levelData.union_fee}}万加盟金)</p>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="标签" v-if="!hideTableColumn.includes('label')" align="center" width="80">
               <template slot-scope="scope">
                  <MyTableTag :tagList="scope.row.tagList"/>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="推荐人(手机号)" v-if="!hideTableColumn.includes('recommendPhone')" align="center" width="150">
              <template slot-scope="scope">
                <p style="margin: 0;">{{scope.row.referrerFullname}}</p>
                <p style="margin: 0;" v-if="scope.row.referrerTelephone">({{scope.row.referrerTelephone}})</p>
              </template>
            </el-table-column>
            <el-table-column prop="insertDate" label="申请日期" v-if="!hideTableColumn.includes('applyTime')" align="center" width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.insertDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="审核人(工号)" v-if="!hideTableColumn.includes('auditNumber')" width="170">
              <template slot-scope="scope">
                <p style="margin: 0;" v-for="item in scope.row.examines">{{item.typeName}}:{{item.employeName}}({{item.employeCode}})</p>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="审核日期" v-if="!hideTableColumn.includes('auditTime')" width="190">
              <template slot-scope="scope">
                <p style="margin: 0;" v-for="item in scope.row.examines">{{item.typeName}}:{{parseTime(item.insertDate)}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="审核备注" v-if="!hideTableColumn.includes('auditRemark')"  width="200" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="name" label="状态" v-if="!hideTableColumn.includes('status')" align="center">
              <template slot-scope="scope">
                  <el-tag :type="scope.row.status=='1'?'primary':scope.row.status=='2'?'success':'warning'" >
                    {{scope.row.status=='1'?'待审核':scope.row.status=='2'?'成功加盟':'驳回'}}
                  </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="220" align="center" fixed="right">
              <template #default="scope">
                  <el-button
                    v-if='scope.row.status=="1" && scope.row.examineStep=="0"'
                    size="medium"
                    type="text"
                    icon="el-icon-s-claim"
                    @click="handleAudit(scope.row,'1')"
                    v-has="'audit:joinCompanyAudit:oneAudit'"
                  >初审</el-button>
                  <el-button
                   v-if='scope.row.status=="1" && scope.row.examineStep=="1"'
                    size="medium"
                    type="text"
                    icon="el-icon-s-claim"
                    @click="handleAudit(scope.row,'2')"
                    v-has="'audit:joinCompanyAudit:twoAudit'"
                  >复审</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-tickets"
                    @click="handleJoinMsg(scope.row)"
                  >加盟信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
         <MyPagination
           :total="total"
           :page.sync="searchForm.pageNum"
           :limit.sync="searchForm.pageSize"
           @pagination="dataInfo"
         />
        </div>
      </el-col>
    </el-row>



    <!-- 加盟审核	 -->
    <el-dialog title="加盟审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
      <el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <el-form-item label="初审人(工号):" prop="remark" label-width="125px" v-if="user.type=='2'">
          {{statusRow.examines[0].employeName}}({{statusRow.examines[0].employeCode}})
        </el-form-item>
        <el-form-item label="初审时间:" prop="remark" label-width="125px" v-if="user.type=='2'">
         {{parseTime(statusRow.examines[0].insertDate)}}
        </el-form-item>
        <el-form-item label="初审备注:" prop="remark" label-width="125px" v-if="user.type=='2'">
          {{statusRow.remarks}}
        </el-form-item>
        <el-form-item label="审核:" prop="status" label-width="125px"  style="width:100%" >
             <el-radio-group v-model="user.status">
              <el-radio  label="1">通过</el-radio>
              <el-radio  label="2">不通过</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" label-width="125px" >
          <el-input v-model="user.remark" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="joinAuditSubmit('user')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {unionList,unionAudit,unionExport } from '@/api/getData'
  import option from '../../common/option.js';
  import image1 from "@/components/UpImg/singleImageUpload.vue"
  export default {
    components: {
    	image1,
    },
    data() {
      return {
        loading: false,
        btnLoading: false,
        downLoading:false,
        applyTime:[],
        auditTime:[],
        searchForm: {
          telephone:'',
          referrerFullname:'',
          name:'',
          idcardNumber:'',
          referrerTelephone:'',
          levelId:'',
          status:'',
          pageNum:1,
          pageSize:20,
        },
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'凭证照',
            value:'img'
        },{
            name:'加盟编码',
            value:'joinCode'
        },{
            name:'手机号',
            value:'phone'
        },{
            name:'真实姓名',
            value:'name'
        },{
            name:'身份证号',
            value:'idCard'
        },{
            name:'开户行',
            value:'bank'
        },{
            name:'加盟会员等级',
            value:'bankNumber'
        },{
            name:'标签',
            value:'label'
        },{
            name:'推荐人(手机号)',
            value:'recommendPhone'
        },{
            name:'申请日期',
            value:'applyTime'
        },{
            name:'审核人(工号)',
            value:'auditNumber'
        },{
            name:'审核日期',
            value:'auditTime'
        },{
            name:'审核备注',
            value:'auditRemark'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        dialogTitle: '',

        auditVisible:false,
        user: {
          customerUnionId: '',
          status:'',
          type :'',//1：初审；2：复审
          remark:''
        },
        rules: {
          status: [{required: true, message: '请选择是否审核通过',trigger: 'blur'}]
        },

        levelList:[],
        statusList:[{name:"待审核",id:'1'},{name:"成功加盟",id:'2'},{name:"已驳回",id:'3'}]
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
       this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleDown(){
       let data = this.addDateRange(this.searchForm, this.applyTime, 'startTime', 'endTime');
       data = this.addDateRange(this.searchForm, this.auditTime, 'auditStartTime', 'auditEndTime');
        this.downLoading = true;
        unionExport(data).then((result) => {
          this.downLoading = false;
          this.$download.name(result.msg);
        });
      },
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.applyTime, 'startTime', 'endTime');
          data = this.addDateRange(this.searchForm, this.auditTime, 'auditStartTime', 'auditEndTime');
          this.loading = true;
          const result = await unionList(data);
          if (result.code == 200) {
            let data = result.rows;
            data.map(item=>{
              item.levelData = item.levelData?JSON.parse(item.levelData):'';
            })
            this.total = result.total;
            this.dataList = data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; });
      },
      resetQuery(){
        this.applyTime = [];
        this.auditTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      /** 审核 **/
      handleAudit(row,type){
        this.user.customerUnionId = row.customerUnionId;
        this.user.status = '';
        this.user.remark = '';
        this.user.type = type;
        this.statusRow = row;
        this.auditVisible = true;
      },
      /** 加盟信息 **/
      handleJoinMsg(row){
        this.$router.push({path:'/audit/joinApplyMsg',query:{customerUnionId:row.customerUnionId }});
      },
      /** 加盟审核提交 **/
      joinAuditSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            unionAudit(this.user).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.auditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
